<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HOP - 圣听音响后台管理系统 - 主页</title>

    <meta name="keywords" content="HOP - 圣听音响后台管理系统">
    <meta name="description" content="HOP - 圣听音响后台管理系统">

    <link rel="shortcut icon" href="../../../public-tools/common/favicon.ico">
    <link href="../../../public-tools/pc/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../../public-tools/pc/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="../../../public-tools/pc/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="../../../public-tools/pc/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="../../../public-tools/pc/css/animate.min.css" rel="stylesheet">
    <link href="../../../public-tools/pc/css/style.min.css?v=4.1.0" rel="stylesheet">
    <style>
        [v-cloak] {
            display: none;
        }
    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content" id="app" v-cloak>
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">今天</span>
                        <h5>日收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{toDaysMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                    </div>-->
                        <!--<small>新用户</small>-->
                        <h3 class="no-margins">共 {{toDaysNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">{{month}} 月</span>
                        <h5>月收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{dateFormatMoney}} 元</h1>
                        <!-- <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                     </div>-->
                        <!--<small>6月</small>-->
                        <h3 class="no-margins">共 {{dateFormatNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">{{year}} 年</span>
                        <h5>年收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{yearMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                    </div>-->
                        <!--<small>2019年</small>-->
                        <h3 class="no-margins">共 {{yearNumber}} 单</h3>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">总收入</span>
                        <!--<h5>订单</h5>-->
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">{{allMoney}} 元</h1>
                        <!--<div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i>
                    </div>-->
                        <!--<small>平台总用户量</small>-->
                        <h3 class="no-margins">共 {{allNumber}} 单</h3>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <!--<button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>-->
                                <button type="button" class="btn btn-outline btn-primary btn-sm"
                                    style="margin-top: -5px" @click="refresh()">
                                    <i class="glyphicon glyphicon-refresh" aria-hidden="true"></i>
                                    刷新
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="flot-chart" style="height: 80vh;">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <!--<div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">2,346</h2>
                                    <small>订单总数</small>
                                    <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar"></div>
                                    </div>
                                </li>
                        </div>-->
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script src="../../../public-tools/pc/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../../public-tools/pc/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../../public-tools/pc/js/plugins/echarts/echarts-all.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.resize.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="../../../public-tools/pc/js/plugins/flot/jquery.flot.symbol.js"></script>
    <script src="../../../public-tools/pc/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="../../../public-tools/pc/js/content.min.js?v=1.0.0"></script>
    <script src="../../../public-tools/pc/js/plugins/jquery-ui/jquery-ui.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="../../../public-tools/pc/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <script src="../../../public-tools/pc/js/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="../../../public-tools/pc/js/plugins/layer/layer.min.js"></script>
    <script src="../../../public-tools/pc/js/vue/vue.js"></script>
    <script src="../../../public-tools/pc/js/vue/vue-resource.js"></script>
    <script src="../../../public-tools/common/js/common.js"></script>
    <script src="../js/utils/http.js"></script>
    <script src="../js/utils/api.js"></script>

    <script>
        var companyId = sessionStorageUtils.getJson(storageKey.sessionStorageKey.companyId);
        var schoolId = sessionStorageUtils.getJson(storageKey.sessionStorageKey.schoolId);

        var app = new Vue({
            el: '#app',
            data: {
                toDaysMoney: 0.0,
                toDaysNumber: 0,
                dateFormatMoney: 0.0,
                dateFormatNumber: 0,
                yearMoney: 0.0,
                yearNumber: 0,
                allMoney: 0.0,
                allNumber: 0,
                year: 2019,
                month: 1,
                stayPay: [],
                totalOrder: [],
                pay: [],
                refund: [],
            },
            //进入页面初始化方法
            created: function () {
                var that = this;
                var token = sessionStorageUtils.getJson(storageKey.sessionStorageKey.token);
                if (empty(token)) {
                    layer.msg("<span style='color:red'>登录超时！请重新登录！</span>", { time: 1500, icon: 5 });
                    setTimeout(function () {
                        window.location.href = _LOGIN_PAGE;
                    }, 1200)
                    return;
                }

                var date = new Date();

                that.year = date.getFullYear();
                that.month = date.getMonth() + 1;

                that.findPayOrder("toDays");
                that.findPayOrder("dateFormat");
                that.findPayOrder("year");
                that.findPayOrder("");

            },
            methods: {
                findPayOrder: function (findType) {
                    var that = this;
                    Get(that, _HOST + _API.wechat_order_findPayOrder + "?findType=" + findType)
                        .then(function (response) {
                            // 响应成功回调
                            console.log(response)
                            if (response) {
                                if (response.success) {
                                    var list = response.list;
                                    if ('toDays' == findType) {
                                        for (var item in list) {
                                            that.toDaysMoney += list[item].payment;
                                        }
                                        that.toDaysMoney = parseFloat(that.toDaysMoney).toFixed(2);
                                        that.toDaysNumber = list.length;
                                    } else if ('dateFormat' == findType) {
                                        for (var item in list) {
                                            that.dateFormatMoney += list[item].payment;
                                        }
                                        that.dateFormatMoney = parseFloat(that.dateFormatMoney).toFixed(2);
                                        that.dateFormatNumber = list.length;
                                    } else if ('year' == findType) {
                                        for (var item in list) {
                                            that.yearMoney += list[item].payment;
                                        }
                                        that.yearMoney = parseFloat(that.yearMoney).toFixed(2);
                                        that.yearNumber = list.length;
                                    } else {
                                        for (var item in list) {
                                            that.allMoney += list[item].payment;
                                        }
                                        that.allMoney = parseFloat(that.allMoney).toFixed(2);
                                        that.allNumber = list.length;
                                    }
                                } else {
                                    layer.msg(response.msg, { time: 1500, icon: 5 });
                                }
                            }
                        })
                },
                findOrder: function (findType) {
                    var that = this;
                    Get(that, _HOST + _API.wechat_order_findOrder + "?findType=" + findType)
                        .then(function (response) {
                            // 响应成功回调
                            console.log(response)
                            if (response) {
                                if (response.success) {
                                    that.stayPay = response.stayPay;
                                    that.totalOrder = response.totalOrder;
                                    that.pay = response.pay;
                                    that.refund = response.refund;
                                    createEcharts();
                                } else {
                                    layer.msg(response.msg, { time: 1500, icon: 5 });
                                }
                            }
                        })
                },
                refresh: function () {
                    window.location.reload();
                },
                // 查询今天待回访
                getListToday: function () {
                    var that = this;
                    Get(that, _HOST + _API.user_orderTrackRelation_getListToday + "?companyId=" + companyId)
                        .then(function (response) {
                            // 响应成功回调
                            console.log(response);
                            if (response) {
                                if (response.success) {
                                    var list = response.list;
                                    if (!empty(list) && list.length > 0) {
                                        layer.confirm('今天有' + list.length + '位顾客待回访！', {
                                            offset: 'rb',
                                            btn: ['前往处理', '忽略'] //按钮
                                        }, function () {
                                            layer.closeAll();
                                            createTab("./content-manage/member/visit/list.html", "待回访管理");
                                        }, function () {
                                        });
                                    }
                                } else {
                                    layer.msg(response.msg, { time: 1500, icon: 5 });
                                }
                            }
                        })
                }
            }

        });

        setTimeout(function () {
            app.findOrder("year");
            // app.getListToday();
        }, 2000);

        // 创建新Tab
        function createTab(url, text) {
            var o = url, m = 0, l = text, k = true;
            if (o == undefined || $.trim(o).length == 0) {
                return false
            }
            $(".J_menuTab", parent.document).each(function () {
                if ($(this).data("id") == o) {
                    if (!$(this).hasClass("active")) {
                        $(this).addClass("active").siblings(".J_menuTab").removeClass("active");
                        // g(this);
                        $(".J_mainContent .J_iframe").each(function () {
                            if ($(this).data("id") == o) {
                                $(this).show().siblings(".J_iframe").hide();
                                return false
                            }
                        })
                    }
                    k = false;
                    return false
                }
            });
            if (k) {
                var p = '<a href="javascript:;" class="active J_menuTab" data-id="' + o + '">' + l + ' <i class="fa fa-times-circle"></i></a>';
                $(".J_menuTab", parent.document).removeClass("active");
                var n = '<iframe class="J_iframe" name="iframe' + m + '" width="100%" height="100%" src="' + o + '" frameborder="0" data-id="' + o + '" seamless></iframe>';
                $(".J_mainContent", parent.document).find("iframe.J_iframe").hide().parents(".J_mainContent").append(n);
                $(".J_menuTabs .page-tabs-content", parent.document).append(p);
                // g($(".J_menuTab.active", parent.document))
            }
            return false
        }

        function createEcharts() {
            option = {
                title: {
                    text: app.year + '年订单数据分析图',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['待付款数', '总订单数', '已付款数', '退款数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '待付款数',
                        type: 'bar',
                        data: app.stayPay,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        }
                    },
                    {
                        name: '总订单数',
                        type: 'bar',
                        data: app.totalOrder,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        }
                    },
                    {
                        name: '已付款数',
                        type: 'bar',
                        data: app.pay,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        }
                    },
                    {
                        name: '退款数',
                        type: 'bar',
                        data: app.refund,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        }
                    }
                ]
            };

            var dom = document.getElementById("flot-dashboard-chart");
            var myChart = echarts.init(dom);
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        }

    </script>
</body>

</html>